<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>InferCare系统 HIS模拟</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <link rel="stylesheet" href="js/layuiadmin/layui/css/layui.css" media="all">
  <link rel="stylesheet" href="js/layuiadmin/style/login.css" media="all">
</head>
<body>
  <div class="layadmin-user-login layadmin-user-display-show" id="LAY-user-login">
    <form class="layui-form" id="login-form" action="#">
        <div class="layadmin-user-login-main">
        <div class="layadmin-user-login-box layadmin-user-login-header">
            <h2>医院信息管理系统HIS模拟</h2>
        </div>
        <div class="layadmin-user-login-box layadmin-user-login-body layui-form">
            <div class="layui-form-item">
            <label class="layadmin-user-login-icon layui-icon layui-icon-username" for="LAY-user-login-username"></label>
            <select name="DOCTOR_NAME" id="DOCTOR_NAME" lay-verify="required" lay-search="" lay-filter="doctorSelect">
                <option value="">请选择医生</option>
            </select>
            </div>
            <div class="layui-form-item">
            <label class="layadmin-user-login-icon layui-icon layui-icon-password" for="LAY-user-login-password"></label>
            <select name="DEPT_NAME" id="DEPT_NAME" lay-verify="required" lay-search="">
                <option value="">请选择科室</option>
            </select>
            </div>
            <div class="layui-form-item">
            <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="LAY-user-login-submit" type="submit">登 录</button>
            </div>
        </div>
        </div>
    </form>
  </div>
  <script src="js/jquery.min.js"></script>  
  <script src="js/layuiadmin/layui/layui.js"></script>  
  <script>
  layui.config({
    base: 'js/layuiadmin/' //静态资源所在路径
  }).extend({
    index: 'lib/index' //主入口模块
  }).use(['index','form'], function () {
    var form = layui.form;      
    var doctors = [
          { "DOCTOR_CODE": "1001", "DOCTOR_NAME": "王辰", "DEPT_CODE": "2001", "DEPT_NAME": "呼吸与危重症医学科" }
        , { "DOCTOR_CODE": "1002", "DOCTOR_NAME": "杨萌", "DEPT_CODE": "2001", "DEPT_NAME": "呼吸与危重症医学科" }
        , { "DOCTOR_CODE": "1003", "DOCTOR_NAME": "李敏", "DEPT_CODE": "2001", "DEPT_NAME": "呼吸与危重症医学科" }
        , { "DOCTOR_CODE": "1004", "DOCTOR_NAME": "王俊", "DEPT_CODE": "2002", "DEPT_NAME": "胸外科" }
        , { "DOCTOR_CODE": "1005", "DOCTOR_NAME": "朱光迎", "DEPT_CODE": "2003", "DEPT_NAME": "肿瘤科" }
        , { "DOCTOR_CODE": "1006", "DOCTOR_NAME": "刘士远", "DEPT_CODE": "2004", "DEPT_NAME": "放射科" }]; 
    var depts = [
          { "DEPT_CODE": "2001", "DEPT_NAME": "呼吸与危重症学科" }
        , { "DEPT_CODE": "2002", "DEPT_NAME": "胸外科" }
        , { "DEPT_CODE": "2003", "DEPT_NAME": "肿瘤科" }
        , { "DEPT_CODE": "2004", "DEPT_NAME": "放射科" }];

      // 动态填充下拉框选项
      // 遍历用户名数组，添加到下拉框
      doctors.forEach(function (item) {
        $('#DOCTOR_NAME').append('<option value="' + item.DOCTOR_CODE + '" data-dept-code="' + item.DEPT_CODE + '">' + item.DOCTOR_NAME + '</option>');
      });
      depts.forEach(function (item) {
        $('#DEPT_NAME').append('<option value="' + item.DEPT_CODE + '">' + item.DEPT_NAME + '</option>');
      });
      // 重新渲染表单
      form.render('select');

    // 监听医生下拉框的选择变化
    form.on('select(doctorSelect)', function (data) {
      
        var selectedDoctor = doctors.find(function (doc) {
          return doc.DOCTOR_CODE === data.value;
        });
        var deptCode = selectedDoctor.DEPT_CODE;

        // // 清空科室下拉框
        $('#DEPT_NAME').empty().append('<option value="">请选择科室</option>');

        // 填充科室下拉框
        depts.forEach(function (dept) {
            if (dept.DEPT_CODE === deptCode) {
                $('#DEPT_NAME').append('<option value="' + dept.DEPT_CODE + '" selected>' + dept.DEPT_NAME + '</option>');    
            } else {
                $('#DEPT_NAME').append('<option value="' + dept.DEPT_CODE + '">' + dept.DEPT_NAME + '</option>');
            }
        });

        // 重新渲染表单
        form.render('select');
            
      });
      
    // // 监听提交
    form.on('submit(LAY-user-login-submit)', function (data) {

        // 获取医生下拉框的选中值和显示值
      var doctorCode = $('#DOCTOR_NAME').val();
      var doctorName = $('#DOCTOR_NAME option:selected').text();

      // 获取科室下拉框的选中值和显示值
      var deptCode = $('#DEPT_NAME').val();
      var deptName = $('#DEPT_NAME option:selected').text();

      var user = { DEPT_CODE: deptCode, DEPT_NAME: deptName, DOCTOR_CODE: doctorCode, DOCTOR_NAME: doctorName };
      console.log(user); // 获取表单字段值
               
        // 发送数据到服务器
        $.ajax({
        url: layui.setter.baseUrl + '/api/login',
        type: 'POST',
        data: user,
        success: function(res){
            if (res.success) {
                // 将数据存储在sessionStorage中
                sessionStorage.setItem('user', JSON.stringify(res.data));

                // 跳转到index.html
                window.location.href = 'html/index.html';

            } else {
                layer.msg('登录失败，请重试:'+response.message, { icon: 5 });
            }
        },
        error: function(err){
            console.log(err);
            layer.msg('登陆失败');
        }
        
    });

        return false; // 阻止表单提交 
      });


});
  </script>
</body>
</html>